import { Component, ViewChild, Injector, Output, EventEmitter, ElementRef, AfterViewInit, ViewContainerRef, ComponentRef, ComponentFactoryResolver, OnDestroy, ViewEncapsulation } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { AppComponentBase } from '@shared/common/app-component-base';
import { PipelineServiceProxy, PipelineListDto } from '@shared/service-proxies/service-proxies';
import { finalize } from 'rxjs/operators';
import { ComponentConfig } from '@app/pipeline/shared/pipeline-config';
import { appModuleAnimation } from '@shared/animations/routerTransition';

@Component({
  selector: 'act-base',
  templateUrl: './act-base.component.html',
  styleUrls: ['./act-base.component.less'],
  encapsulation: ViewEncapsulation.None,
  animations: [appModuleAnimation()]
})

export class ActBaseModalComponent extends AppComponentBase implements OnDestroy {

  @ViewChild('actionModal') modal: ModalDirective;

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  compRef: ComponentRef<any>; //  加载的组件实例

  @Output() modalRun: EventEmitter<any> = new EventEmitter<any>();

  active = false;
  runing = false;

  //modal 大小
  modalSize = '';
  //是否全屏
  isFullScreen = false;

  pipe: PipelineListDto = new PipelineListDto();

  constructor(
    injector: Injector,
    private resolver: ComponentFactoryResolver,
    private _pipelineService: PipelineServiceProxy,
  ) {
    super(injector);
  }

  show(pipe: PipelineListDto): void {

    this.active = true;

    this.isFullScreen = false;

    this.pipe = pipe;

    setTimeout(() => {
      this.loadComponent();
      this.modal.show();
    }, 0);

  }

  run(): void {
    this.runing = true;

    this._pipelineService.getPipelineAndRun(this.pipe.id)
      .pipe(finalize(() => { this.runing = false; }))
      .subscribe(() => {
        this.notify.info('运行成功');
        this.close();
        this.modalRun.emit(null);
      });
  }

  fullScreen() {
    this.isFullScreen = !this.isFullScreen;
    // setTimeout(() => {
    //   if (this.isFullScreen) {
    //     mApp.initScroller($('.m-scrollable-full-screen'), {height: '100%'});
    //   } else {
    //     $('.full-screen-content .mCSB_scrollTools').hide();
    //     $('.full-screen-content .mCustomScrollBox').removeClass('mCustomScrollBox');
    //     $('.full-screen-content .mCSB_container').removeClass('mCSB_container');
    //   }
    // }, 0);

  }

  close(): void {
    this.active = false;
    this.modal.hide();
  }

  loadComponent() {
    this.container.clear();

    let config = new ComponentConfig();

    this.modalSize = config.getComponentByName(this.pipe.actCode).modalSize;

    const component = config.getComponentByName(this.pipe.actCode).component;

    if (component) {
      let factory = this.resolver.resolveComponentFactory(component);

      if (this.compRef) {
        this.compRef.destroy();
      }
      this.compRef = this.container.createComponent(factory); //创建组件

      let modal = this.compRef.instance;

      modal.load(this.pipe);
    }
  }

  ngOnDestroy() {
    if (this.compRef) {
      this.compRef.destroy();
    }
  }

}
